<div class="header_top">
    <div class="header_content">
        <h1>
            <a href="javascript:;" class="logo"></a>
        </h1>
        <ul class="header_nav">
            <li><a href="javascript:;" class="header_triangle">发现音乐</a></li>
            <li><a href="javascript:;">我的音乐</a></li>
            <li><a href="javascript:;">朋友</a></li>
            <li><a href="javascript:;">商城</a></li>
            <li><a href="javascript:;">音乐人</a></li>
            <li class="downloadAPP"><a href="javascript:;">下载客户端</a></li>
        </ul>
        <div class="header_right">
            <div class="header_search">
                <input type="text" name="srch" id="header_sh" class="header_search_input" value="" style="opacity: 1;"
                    onchange="search(value)" placeholder="音乐/视频/电台/用户">
            </div>
            <div class="header_create">
                创作者中心
            </div>
            <div class="header_login">
                <img id='limg' class="hide">
                <a id='login' href="javascript:;" onclick="qrLogin()">登录</a>
            </div>
        </div>
    </div>
</div>
<div class="header_bottom_nav">
    <div class="header_bottom_pic">
        <ul class="header_bottom_nav_fx">
            <li><a href="javascript:;"><span class="header_pic">推荐</span></a></li>
            <li><a href="javascript:;"><span>排行榜</span></a></li>
            <li><a href="javascript:;"><span>歌单</span></a></li>
            <li><a href="javascript:;"><span>主播电台</span></a></li>
            <li><a href="javascript:;"><span>歌手</span></a></li>
            <li><a href="javascript:;"><span>新碟上架</span></a></li>
        </ul>
    </div>
</div>
<style>
    .header_top {
        background-color: #242424;
    }

    .header_content {
        width: 1100px;
        height: 70px;
        margin: 0 auto;
    }

    .logo {
        width: 157px;
        height: 70px;
        float: left;
        background: url('../image/sprites.png') no-repeat left center;
        background-position: 0 0;
    }

    #limg {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        margin-left: 10px;
    }

    .header_nav {
        width: 550px;
        display: inline-block;
        overflow: hidden;
    }

    .header_nav li {
        float: left;
        height: 100%;
        line-height: 70px;
        position: relative;
    }

    .header_nav a {
        display: inline-block;
        height: 100%;
        font-size: 14px;
        color: #ccc;
        padding: 0 19px;
        display: flex;
        justify-content: center;
    }

    .downloadAPP::after {
        content: "";
        float: right;
        background: url(../image/sprites.png) no-repeat;
        background-position: -190px 20px;
        width: 40px;
        height: 70px;
        position: absolute;
        top: 0;
        right: -20px;
    }

    .header_right {
        float: right;
    }

    .header_nav a:hover {
        background-color: #000;
    }

    .header_search {
        width: 168px;
        height: 32px;
        float: left;
        overflow: hidden;
        background: #fff;
        border-radius: 32px;
        margin-top: 18px;
    }

    .header_search_input {
        outline: none;
        border: none;
        line-height: 32px;
        background: url(../image/sprites.png) no-repeat;
        background-position: 0px -98px;
        padding-left: 30px;
    }

    .header_create {
        border-radius: 30px;
        border: 1px solid #666;
        color: #ccc;
        height: 30px;
        padding: 0 16px;
        line-height: 30px;
        margin: 20px 0 0 10px;
        float: left;
        cursor: pointer;
    }

    .header_create:hover {
        border-color: #fff;
        color: #fff;
    }

    .header_login {
        line-height: 70px;
        float: left;
        color: #787878;
        text-align: center;
        font-size: 14px;
    }

    .header_login a {
        width: 70px;
        display: block;
    }

    .header_login a:hover {
        text-decoration: underline;
        color: #999;
    }

    .header_bottom_nav {
        width: 100%;
        min-height: 6px;
        background: red;
    }

    /* nav被选中时显示三角形 */
    .header_triangle::after {
        position: absolute;
        display: block;
        content: '';
        bottom: 0px;
        width: 0;
        height: 0;
        border-bottom: 6px solid red;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
    }

    .header_bottom_pic {
        display: block;
    }

    .header_bottom_nav_fx {
        height: 34px;
        display: flex;
        align-items: center;
        padding: 0;
    }

    .header_bottom_nav_fx a {
        width: 84px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        display: block;
    }

    .header_bottom_nav_fx span {
        color: #fff;
    }

    .header_bottom_nav_fx span:hover,
    .header_pic {
        height: 20px;
        width: 34px;
        padding: 4px 17px;
        border-radius: 20px;
        line-height: 20px;
        background-color: #242424;
    }

</style>

<script>
    nav_wz()
    $(window).resize(function () {
        nav_wz()
    });

    function nav_wz() {
        // 定位nav的位置
        $('.header_bottom_nav_fx').eq(0)[0].style.marginLeft = $('.header_nav li').eq(0)[0].offsetLeft + 'px'
    }

</script>
